<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <hr>
    <!-- el-upload 组件  该组件内部会自己使用原生的xhr进行请求的发送-->
    <!-- list-type 是列表的类型 可选值 text/picture/picture-card -->
    <!-- action 是上传的地址 -->
    <!-- name 是上传的文件字段名 -->
    <!-- headers 是请求头的信息 -->
    <!-- on-success 上传成功的钩子函数，这里可以获取到服务器返回的数据 -->
    <el-upload 
      action="http://124.223.14.236:8060/admin/common/upload?type=images" 
      list-type="picture-card"
      name="file"
      :headers="{'x-token':token}"
      :on-success="onSuccess"
    ></el-upload>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaW5mbyI6eyJpZCI6IjEiLCJsb2dpbl9uYW1lIjoiYWRtaW4iLCJwYXNzd29yZCI6Ijk2ZTc5MjE4OTY1ZWI3MmM5MmE1NDlkZDVhMzMwMTEyIiwibmFtZSI6IlRoaW5rSlPkuIDlk6UiLCJlbWFpbCI6Imhld3UxMTIyQDE2My5jb20iLCJwaG9uZSI6IjE3MzQyMDY1OTA5IiwibG9naW5faXAiOiI6OjEiLCJsb2dpbl9kYXRlIjoiMjAxOC0wMS0wOCAxNjoyMjo1MSIsImNyZWF0ZV9kYXRlIjoiMjAxNy0xMi0xNCAxMTo1Mjo0NiIsInVwZGF0ZV9kYXRlIjoiMjAyMS0wOS0wOCAxOTo0MzowMyIsImRlbF9mbGFnIjoiMCIsInJvbGVfaWQiOlsiMWM1NGUwMDNjMWZjNGRjZDliMDg3ZWY4ZDQ4YWJhYzMiXSwic3RhdHVzIjoxLCJkZWZhdWx0X2RhdGEiOiIxIiwicm9sZW5hbWUiOlsi6LaF57qn566h55CG5ZGYIl19LCJpYXQiOjE2NDY0NTIwOTl9.tgqHELzyxNYCH0omFGh8bRQmerap24YZkMXQFluKbcA'
    }
  },
  methods: {
    onSuccess(response, file, fileList){
      console.log(response);
    }
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
